@mui/system

Box Component

The Box component serves as a wrapper component for most CSS utility needs. The 'sx' prop is used to apply styles directly, leveraging the theme values for consistency.

{"<Box sx={{ color: 'primary.main', p: 2, m: 1, fontSize: 'h6.fontSize', fontWeight: 'fontWeightMedium' }}>Hello World</Box>"}

System Props

System props allow you to apply styles using specific properties that map to theme values. This is an alternative to the 'sx' prop for applying styles.

{"<Box color='primary.main' p={2} m={1} fontSize='h6.fontSize' fontWeight='fontWeightMedium'>Hello World</Box>"}

Custom Style Functions

Custom style functions allow you to define your own style functions that can be used with the 'styled' utility. This enables you to create more complex and reusable style definitions.

{"import { styled } from '@mui/system';\nconst MyComponent = styled('div')(({ theme }) => ({\n  color: theme.palette.primary.main,\n  padding: theme.spacing(2),\n  margin: theme.spacing(1),\n  fontSize: theme.typography.h6.fontSize,\n  fontWeight: theme.typography.fontWeightMedium\n}));"}

Responsive Values

The package supports responsive values, allowing you to specify different styles for different breakpoints. This is done using an object that maps breakpoints to values within the 'sx' prop or system props.

{"<Box sx={{ width: { xs: 100, sm: 200, md: 300, lg: 400, xl: 500 } }}>Responsive Box</Box>"}